<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <!-- 
            多个样式都能应用于同一个元素, 需要浏览器通过权重计算比较
            比较优先级a>b>c
            a:样式的选择器中id值的数目;
            b:选择器中其他属性和伪类的数目;
            c:选择器中元素名和伪元素的数目;
         -->
        <style type="text/css">
            a {
                color: black;
            }
            a.myclass {
                color: white;
                background: grey;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">
            Visit the Apress website
        </a>
        <p>I like <span>apples</span> and oranges.</p>
        <a class="myclass" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>